import QtQuick 1.1
import com.nokia.meego 1.1

Page {
	orientationLock: PageOrientation.LockPortrait

	// Only load image when tab is opened
	onVisibleChanged: {
		if (visible && prognosisImage.source == '') {
			prognosisImage.reload();
		}
	}

	Connections {
		target: settings
		onSettingsUpdated: prognosisImage.source = ''
	}

	// Background of images is white, so it's better to paint the entire page white...
	Rectangle {
		anchors.fill: parent
		color: "white"
		clip: true

		PageHeader {
			id: header
            text: qsTr("Voorspelling 2 uur")
		}

		Text {
			id: label
            text: qsTr("Verwachte neerslag voor") + "<br />" + settings.locationName
			width: parent.width
			horizontalAlignment: Text.AlignHCenter
			font.pixelSize: 24
			wrapMode: Text.Wrap

			anchors {
				top: header.bottom
				margins: UiConstants.DefaultMargin
				horizontalCenter: parent.horizontalCenter
			}
		}

		Label {
			id: loadingLabel
            text:  prognosisImage.status != Image.Error ? qsTr("Ophalen prognose...") : qsTr("Fout bij ophalen prognose")
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.verticalCenter: parent.verticalCenter
			visible: prognosisImage.status != Image.Ready
		}

		ProgressBar {
			minimumValue: 0.0
			maximumValue: 1.0
			indeterminate: prognosisImage.progress == 0
			value: prognosisImage.progress
			visible: loadingLabel.visible && prognosisImage.status != Image.Error
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.top: loadingLabel.bottom
			width: parent.width * 0.75
			anchors.margins: UiConstants.DefaultMargin
		}

		// Use AnimatedImage instead of plain Image; when reloading, plain Image flashes much more than AnimatedImage. No clue why.
		AnimatedImage {
			id: prognosisImage
			anchors.top: label.bottom
			anchors.topMargin: 60
			smooth: true
			height: 300
			width: 460
			x: 10
			playing: false
			property string url: "http://grafiek.buienradar.nl/chart.ashx?w=460&h=300&d=&r=2&ctype=2"

			function reload() {
				if (settings.latitude != '' && settings.longitude != '') {
					source = url + "&lat=" + settings.latitude + "&lon=" + settings.longitude + "#" + Date.now();
				} else {
					showSettingsDialog.open()
				}
			}

			scale: prognosisImage.status == Image.Ready ? 1 : 0

			Behavior on scale {
				NumberAnimation {
					easing.type: Easing.InQuad
					duration: 300
				}
			}
		}

		Image {
			source: "legenda.gif"
			anchors {
				top: prognosisImage.bottom
				topMargin: 20
				horizontalCenter: parent.horizontalCenter
			}

			opacity: prognosisImage.scale
		}

		ToolIcon {
			id: refreshButton
			iconId: "toolbar-refresh"
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.bottom: parent.bottom
			onClicked: prognosisImage.reload()
			visible: prognosisImage.status == Image.Ready || prognosisImage.status == Image.Error
		}
	}


}
